<template>
  <!-- 佣金明细 -->
  <div class="datail">
    <van-nav-bar title="佣金明细" left-arrow @click-left="onClickLeft" />
    <div class="datail-list">
      <h3>佣金总额：¥108.00</h3>
      <ul>
        <li v-for="item in detailData.list" :key="item.id">
          <div class="bl">
            <p>{{ item.name }}</p>
            <span>{{ item.time }}</span>
          </div>
          <div class="br">
            <span>{{ item.moeny }}</span>
          </div>
        </li>
      </ul>
    </div>
    <van-divider>我是有底线的</van-divider>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'datail',
  data() {
    return {
      detailData: [],
    }
  },
  created() {
    axios
      .get('/mock/api/user/promote/detail')
      .then((mockData) => {
        this.detailData = mockData.data.detail
      })
      //   .then(console.log)
      .catch(console.error)
  },
  methods: {
    onClickLeft() {
      this.$router.push('./earnings')
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.van-nav-bar .van-icon) {
  color: black;
}
:deep(.van-nav-bar__title) {
  font-size: 18px;
  font-weight: bold;
}
* {
  margin: 0;
  padding: 0;
}
.datail-list {
  h3 {
    padding: 0 2%;
    margin-top: 1%;
  }
  ul {
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 3vh 0;
      padding: 0 2%;
      p {
        font-size: 0.9rem;
      }
      .bl {
        span {
          font-size: 0.8rem;
        }
      }
      .br {
        color: rgb(255, 98, 98);
      }
    }
  }
}
</style>
